<template>
  <div class="Transfers">
    <div class="Transfers-type">
      <div style="margin-top: 10px">
        <div class="star" style="width: 100px;margin-bottom: 10px;">申请原因</div>
        <el-input style="width: 500px" disabled v-model="detail.reason" placeholder="" size="mini" type="textarea" clearable>
        </el-input>
      </div>
    </div>
    <div class="Transfers-plan" v-if="detail">
      <div class="line">添加数据</div>
      <div class="Transfers-list">
        <div class="Transfers-list-module" style="width: 100%">
          <div class="Transfers-list-module-content myscroll">
            <el-table size="mini" :data="detail.list" style="width: 100%">
              <!-- <el-table-column prop="img" label="图片" width="80">
                <template slot-scope="{ row }">
                  <el-image v-if="row.img" style="width: 50px; height: 50px" :src="row.img" fit="contain"
                    :preview-src-list="[row.img]"></el-image>
                </template>
              </el-table-column> -->
              <!-- <el-table-column prop="type_name" label="款名" align="center"> </el-table-column> -->
              <el-table-column prop="source_allocation_number" label="借出单号" align="center"> </el-table-column>
              <el-table-column prop="sku_code" label="SKU" align="center">
              </el-table-column>
              <el-table-column prop="num" label="数量" align="center"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="summary">
        <div>
          共 <span style="color:red">{{detail.num}}</span> 件
        </div>
    </div>
    <el-dialog :visible.sync="dialogVisibleImage" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
  
<script>
import {
  postAdminOmsGetAllocationType,
  postAdminOmsSetAllocation_ipurchase,
  postAdminOmsgetlogisticsCompanyCode,
  postAdminOmsgetsale_timesExcel_listdetail,
} from "@/api";
import { regionData } from "element-china-area-data";
import { floatMultiply, floatAdd } from "@/utils/algorithm.js";

export default {
  data() {
    return {
      dialogVisibleImage: false,
      dialogImageUrl: "",
      detail: "",
    };
  },
  activated() {
    this.postAdminOmsgetsale_timesExcel_listdetail();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
    async postAdminOmsgetsale_timesExcel_listdetail() {
      let identification = this.$route.query.allocation_number;
      let obj = {
        identification,
      };
      let res = await postAdminOmsgetsale_timesExcel_listdetail(obj);
      this.detail = res.data;
      console.log("res", res);
    },
    changeselectCouriertype(e) {
      console.log("e", e);
      if (e != "快递") {
        this.remark = e;
      } else {
        this.remark = "";
      }
    },
    async postAdminOmsgetlogisticsCompanyCode() {
      let res = await postAdminOmsgetlogisticsCompanyCode();
      this.Courier = res.data;
    },
    handleChangeCourier(val) {
      this.transport_type = this.Courier.find(
        (item) => item.logistics_company_code == val
      ).logistics_company_name;
    },
    // 省市区
    handleChange(e) {
      if (e.length) {
        let label = this.$refs.cascaderlabel.getCheckedNodes();
        let arr = label[0].pathLabels;
        this.wp_province = arr[0];
        this.wp_city = arr[1];
        this.wp_area = arr[2];
      } else {
        this.wp_province = "";
        this.wp_city = "";
        this.wp_area = "";
      }
    },
    onInput(e, index) {
      let { TableDataSelect } = this;
      let tmpObj = TableDataSelect[index];
      if (Number(e)) {
        tmpObj.num = e;
        if (tmpObj.selling_price) {
          tmpObj.zh_price = floatMultiply(
            floatMultiply(Number(tmpObj.selling_price), 0.68),
            e
          );
        } else {
          tmpObj.zh_price = 0;
        }
      } else {
        tmpObj.num = 1;
        if (tmpObj.selling_price) {
          tmpObj.zh_price = floatMultiply(Number(tmpObj.selling_price), 0.68);
        } else {
          tmpObj.zh_price = 0;
        }
      }
      this.$set(this.TableDataSelect, index, tmpObj);
      this.TableDataSelectSummary();
    },
    onInputSelling_price(e, index) {
      let { TableDataSelect } = this;
      let tmpObj = TableDataSelect[index];
      if (Number(e)) {
        tmpObj.selling_price = e;
        if (tmpObj.num) {
          tmpObj.zh_price = floatMultiply(
            floatMultiply(Number(tmpObj.selling_price), 0.68),
            tmpObj.num
          );
        } else {
          tmpObj.zh_price = 0;
        }
      } else {
        tmpObj.selling_price = "";
        tmpObj.zh_price = 0;
      }
      this.$set(this.TableDataSelect, index, tmpObj);
      this.TableDataSelectSummary();
    },
    async onSearch() {
      let { number } = this;
      let obj = {
        number,
      };
      let res = await postAdminOmsGetAllocationType(obj);
      this.tableData = res.data;
      this.multipleSelection = [];
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onAdd() {
      let { multipleSelection, TableDataSelect } = this;
      multipleSelection = multipleSelection.map((e) => {
        e.num = 1;
        e.selling_price = "";
        return e;
      });
      let arr = [];
      for (let index = 0; index < multipleSelection.length; index++) {
        let is = TableDataSelect.some((e) => {
          return e.sku_code == multipleSelection[index].sku_code;
        });
        if (!is) {
          let obj = {
            ...multipleSelection[index],
            zh_price: floatMultiply(
              Number(multipleSelection[index].selling_price),
              0.68
            ),
          };
          console.log("obj", obj);
          arr.push(obj);
        }
      }
      TableDataSelect.push(...arr);
      this.TableDataSelect = TableDataSelect;
    },
    onDelete(e) {
      let { TableDataSelect } = this;
      this.$confirm("确定删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          TableDataSelect.splice(e, 1);
          this.TableDataSelect = TableDataSelect;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSuccessXJ(response) {
      let { images } = this;
      let obj = {
        name: "图片",
        url: response.img,
      };
      images.push(obj);
      this.images = images;
    },
    handleRemovesXJ(file) {
      let { images } = this;
      let index = images.findIndex((e) => e.url == file.url);
      images.splice(index, 1);
      this.images = images;
      return true;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleImage = true;
    },
    async onSubmit() {
      this.loading = true;
      let {
        TableDataSelect,
        wp_user,
        wp_phone,
        wp_address,
        wp_province,
        wp_city,
        wp_area,
        images,
      } = this;

      let is = TableDataSelect.some((e) => {
        return !e.selling_price;
      });
      if (is) {
        this.loading = false;
        return this.$message.warning("请输入正确的单价");
      }
      let arr = [];
      for (let index = 0; index < TableDataSelect.length; index++) {
        let obj = {
          sku_code: TableDataSelect[index].sku_code,
          num: TableDataSelect[index].num,
          selling_price: TableDataSelect[index].selling_price,
        };
        arr.push(obj);
      }
      let obj = {
        wp_user,
        wp_phone,
        wp_province,
        wp_city,
        wp_area,
        wp_address,
        images,
        arrlist: arr,
      };
      try {
        let res = await postAdminOmsSetAllocation_ipurchase(obj);
        this.$message.success("提交成功");
        this.loading = false;
        this.number = "";
        this.wp_phone = "";
        this.wp_address = "";
        this.wp_user = "";
        this.wp_province = "";
        this.wp_city = "";
        this.wp_area = "";
        this.Couriertype = "";
        this.tableData = [];
        this.multipleSelection = [];
        this.TableDataSelect = [];
        this.selectedOptions = [];
      } catch (error) {
        this.loading = false;
      }
    },
  },
};
</script>
  
<style lang="scss" scoped>
.fileimg {
  width: 146px;
  height: 146px;
  margin-right: 10px;

  >img {
    object-fit: contain;
    width: 146px;
    height: 146px;
  }
}

.summary {
  margin-top: 10px;
  border: 1px dashed #999;
  display: flex;
  padding: 10px;
  justify-content: center;

  >div {
    padding: 0 20px;

    >span {
      font-weight: 600;
    }
  }
}

.info {
  display: flex;
  margin-top: 15px;

  >div {
    margin-right: 20px;

    > :nth-child(1) {
      font-size: 12px;
      margin-bottom: 10px;
    }

    >div:nth-child(2) {
      display: flex;
      align-items: center;
    }
  }
}

.myscroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

.myscroll::-webkit-scrollbar {
  display: none;
}

// 隐藏滚动条
.Transfers {
  background: #fff;
  font-size: 14px;
  padding: 20px 0;

  .Transfers-type {
    // display: flex;
    // align-items: center;

    >div {
      // padding: 10px 20px;
      margin: 0 20px 10px;
      // background: #efefef;
      border-radius: 8px;

      >div:nth-child(1) {
        font-weight: 600;
      }

      >div:nth-child(2) {
        color: red;
      }
    }

    >div:nth-child(2) {
      padding: 10px 20px;
      margin: 0 20px 10px;
      background: #efefef;
      border-radius: 8px;

      >div:nth-child(1) {
        font-weight: 400;
      }

      >div:nth-child(2) {
        color: #333;
        margin-left: 10px;

        >div {
          >span {
            margin-left: 10px;
            color: #2c70d6;
          }
        }
      }
    }
  }

  .Transfers-plan {
    padding: 10px 20px;

    >div:nth-child(1) {
      font-weight: 600;
      margin-bottom: 20px;
    }

    .Transfers-list {
      display: flex;
      align-items: center;

      .Transfers-list-module {
        border: 1px solid #efefef;
        width: 600px;
        border-radius: 4px;

        .Transfers-list-module-search {
          padding: 0 20px;
          height: 48px;
          display: flex;
          align-items: center;
          background-color: #f5f7fa;
          font-weight: 600;
          font-size: 12px;
        }

        .Transfers-list-module-content {
          // height: 400px;

          /deep/ .el-table__row {
            height: 53px;
          }
        }
      }
    }
  }
}
</style>